<template>
  <div class="line w100">
    <div
      :style="{
        height: state.height,
        width: state.width,
        borderBottom: state.height + ' ' + state.style + ' ' + state.color,
      }"
    ></div>
  </div>
</template>

<script setup>
import { defineProps, reactive } from "vue";

const props = defineProps({
  msg: Object,
});

const state = reactive({
  width: props.msg?.width || "50%",
  height: props.msg?.height || "2px",
  color: props.msg?.color || "#fff",
  style: props.msg?.style || "solid ",
});
</script>
